<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布帖子</title>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/issuepost.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}" type="text/css" >
<!--    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">-->
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.css}">



</head>

<body>
<div th:replace="~{head/topbar::topBar}"></div>
<div id="findRoommate">
    <div class="container col-md-8 offset-md-2">
        <div class="post-heading"><h3>在这里遇见更多朋友！</h3></div>
        <form action="/article/postArticle">
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">帖子标题</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="title"  placeholder="请输入帖子标题" required>
                </div>
            </div>

            <div class="form-group row">
                <!-- <div>
                    <button onclick="UM.getEditor('editor').setHide()">隐藏编辑器</button>
                    <button onclick="UM.getEditor('editor').setShow()">显示编辑器</button>
                </div>-->
                <label for="div1" class="col-sm-2 col-form-label">帖子内容</label>
                <div id="div1">
                    <!--上传文本编辑区域-->
                </div>
            </div>

            <div class="form-group row">
                <div class="col-md-6 offset-md-5">
                    <button type="button" class="btn btn-success" id="post" onclick="tijiao()">发布帖子</button>
                </div>
            </div>
        </form>

    </div>
</div>




<div th:replace="~{food/bottombar::topBar}"></div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script  th:src="@{/airent/js/vue.js}"></script>


<script type="text/javascript" src="/airent/plugins/editor/wangEditor-3.1.1/release/wangEditor.js"></script>
<script type="text/javascript">
    function tijiao() {
        let title = $("#title").val()
        let content = editor.txt.html()
        if (title==null||title==''){
            alert("请填写标题")
            return;
        }
        if (content==null||content==''){
            alert("请填写发帖内容")
            return;
        }
        console.log(content)
        let data = {
            articleContent:content,
            articleTitle:title
        }
        $.ajax({
            type: "post",
            url: '/article/postArticle',
            data : JSON.stringify(data),
            contentType:"application/json",
            // contentType: "application/json",
            success: function(data){
                if (data == 'success'){
                    window.location.href = 'article.html'
                }
            }
        });
    }
    var E = window.wangEditor
    var editor = new E('#div1')
    //隐藏上传网络图片
    editor.customConfig.showLinkImg=false
    editor.customConfig.uploadImgServer = '/article/addImg'
    editor.customConfig.uploadFileName = 'files';
    editor.config.menus = [
        'bold',
        'head',
        'link',
        'italic',
        'underline',
        'image'
    ]
    editor.create()

    editor.config.uploadImgHooks = {
        // 上传图片之前
        /*before: function(xhr) {
          console.log(xhr)

          // 可阻止图片上传
          return {
            prevent: true,
            msg: '需要提示给用户的错误信息'
          }
        },*/
        // 图片上传并返回了结果，图片插入已成功
        /*success: function(xhr) {
          console.log('success', xhr)
        },*/
        // 图片上传并返回了结果，但图片插入时出错了
        /*fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },*/
        // 上传图片出错，一般为 http 请求的错误
        /*error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },*/
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)

            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn("https://airent-1303816068.cos.ap-shanghai.myqcloud.com/"+result.url)
        }
    }

</script>


<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>
</body>

</html>
